<template>
<view class="yk_manage_view">
    <view class="find">
        <u-search 
            shape="square"
            @search="onFindData"
            v-model="findData"
            :show-action="false"
            :height="80">
        </u-search>
        <u-loading
            v-if="loading"
            mode="flower">
        </u-loading>
    </view>
    <view class="title el-after">
        当前入库药品
    </view>
    <view class="two">
        <u-table>
            <u-tr>
                <u-th>药品名称</u-th>
                <u-th>药品单价</u-th>
                <u-th>库存</u-th>
                <u-th>详细</u-th>
            </u-tr>
            <u-tr 
                v-for="(item,index) in dataList" 
                :key="index">
                <u-td>{{item.dname}}</u-td>
                <u-td>{{item.dsellPrice}}</u-td>
                <u-td>{{item.dstock}}</u-td>
                <u-td>
                    <view class="bt_list">
                        <u-icon 
                            name="edit-pen-fill"
                            color="#000022"
                            @click="goPage(item.dname)">
                        </u-icon>
                        <u-icon 
                            name="trash-fill"
                            color="#e20000"
                            @click="deleteData(item)">
                        </u-icon>
                    </view>
                </u-td>
            </u-tr>
        </u-table>
    </view>
    <view
        class="bt_list" 
        @click="goPage()">
        <u-icon name="plus" color="#ffffff"></u-icon>
    </view>
</view>
</template>

<script>
//药库管理主页
import {findDrugs,deleteDrug} from"@/common/api";
export default {
    data() {
        return {
            loading:false,
            findData:"",
            dataList:[],  //数据列表
        }
    },
    onShow(){  //页面可见时获取数据
        this.onFindData(this.findData);  //初始化数据
    },
    methods: {
        onFindData(value){  //查找药品
            this.loading = true;
            findDrugs(
                {
                    dname:value,
                },
            ).then(data=>{
                this.dataList = data;
            }).finally(()=>{
                this.loading = false;
            });
        },
        deleteData(item){  //删除数据
            this.loading=true;
            deleteDrug(
                item,
            ).then(data=>{
                this.dataList = this.dataList.filter(_item=>{
                    return item.dname !== _item.dname;
                });
            }).finally(()=>{
                this.loading = false;
            });
        },
        goPage(name){  //页面跳转
            if(name){
                uni.navigateTo({
                    url: '/pages/yk_manage/views/update?'+
                    'dname='+name,
                });
            }else{
                uni.navigateTo({
                    url: '/pages/yk_manage/views/update'
                });
            }
        },
    },
}
</script>
<style scoped lang="scss">
.yk_manage_view{
    padding: 35rpx;
    box-sizing: border-box;
    >.title{
        width: fit-content;
        font-size: 55rpx;
        color: #000000;
        font-weight: bold;
        margin-bottom: 35rpx;
    }
    >.find{
        display: flex;
        align-items: center;
        margin-bottom: 25rpx;
    }
    >.two{
        margin-bottom: 155rpx;
        .bt_list{
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-gap: 10rpx;
            font-size: 40rpx;
            justify-items: center;
        }
    }
    >.bt_list{
        position: fixed;
        bottom: 35rpx;
        right: 35rpx;
        width: 120rpx;
        height: 120rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 50%;
        background-color: #253F73;
        font-size: 40rpx;
        color: #ffffff;
        background-image: linear-gradient(-90deg, #29bdd9 0%, #276ace 100%);
        box-shadow: 0 10px 40px -10px rgba(0,64,128,.2);
        z-index: 999;
    }
}
</style>
